<template>
  <view class="order-container">
    <Filter
      v-if="tabList.length > 0"
      :data="tabList"
      @onChanged="onTabChanged"
    ></Filter>
    <!-- @ScrollToUpper="ScrollToUpper" -->
    <div class="list-container" :style="{ height: `${listContainerHeight}px` }">
      <template v-if="listContainerHeight && listContainerHeight > 0">
        <scroll-view
          v-if="orderList.length > 0 && listContainerHeight"
          :scroll-y="true"
          :style="{ height: `${listContainerHeight}px` }"
          :scroll-top="scrollTop"
          @ScrollToLower="onScrollBottom"
          @Scroll="onScroll"
        >
          <div class="Loading-dian">
            <div class="loadingThree" v-if="topFlag">
              <span></span>
              <span></span>
              <span></span>
            </div>
          </div>
          <div
            class="list-item-container"
            v-for="(item, index) in orderList"
            :key="item.id"
          >
            <orderItem :info="item"></orderItem>
          </div>
          <div style="height: 10px"></div>

          <Loading
            :page="page"
            :total="last_page"
            :loadingFlag="loadingFlag"
            :tipFlag="tipFlag"
          ></Loading>

          <div style="height: 100px"></div>
        </scroll-view>
        <div style="height: 100px"></div>
        <!-- 空状态 -->
        <template v-if="orderList.length === 0 && !loading">
          <nut-empty description="无数据"></nut-empty>
        </template>
        <!-- 加载状态 -->
        <template v-if="orderList.length === 0 && loading">
          <nut-skeleton
            :style="{ width: '100%', margin: '0.5rem 0.5rem' }"
            width="100%"
            height="15px"
            title
            animated
            row="3"
          >
          </nut-skeleton>
          <nut-skeleton
            :style="{ width: '100%', margin: '0.5rem 0.5rem' }"
            width="100%"
            height="15px"
            title
            animated
            row="3"
          >
          </nut-skeleton>
          <nut-skeleton
            :style="{ width: '100%', margin: '0.5rem 0.5rem' }"
            width="100%"
            height="15px"
            title
            animated
            row="3"
          >
          </nut-skeleton>
          <nut-skeleton
            :style="{ width: '100%', margin: '0.5rem 0.5rem' }"
            width="100%"
            height="15px"
            title
            animated
            row="3"
          >
          </nut-skeleton>
          <nut-skeleton
            :style="{ width: '100%', margin: '0.5rem 0.5rem' }"
            width="100%"
            height="15px"
            title
            animated
            row="3"
          >
          </nut-skeleton>
          <nut-skeleton
            :style="{ width: '100%', margin: '0.5rem 0.5rem' }"
            width="100%"
            height="15px"
            title
            animated
            row="3"
          >
          </nut-skeleton>
          <nut-skeleton
            :style="{ width: '100%', margin: '0.5rem 0.5rem' }"
            width="100%"
            height="15px"
            title
            animated
            row="3"
          >
          </nut-skeleton>
        </template>
      </template>
    </div>

    <customTabBar ref="tabbar"></customTabBar>
  </view>
</template>
<script>
import customTabBar from "../../components/custom-tab-bar/customTabBar.vue";
import { needLogin } from "../../utils/needLoginHook";

export default {
  name: "Order",
  components: {
    customTabBar,
  },
  mixins: [needLogin],
};
</script>
<script setup>
import { reactive, onMounted, ref, watch } from "vue";
import { Empty } from "@nutui/nutui-taro";
import orderItem from "../../components/order/order_item.vue";
import { useTabbarStore } from "../../store";
import Filter from "./filter.vue";
import Loading from "../../components/Loading/index";
import Taro, { useDidShow, usePullDownRefresh } from "@tarojs/taro";
import * as orderApi from "../../api/order";
import { useReachBottom } from "@tarojs/taro";
import { storeToRefs } from "pinia";
const tabbarStore = useTabbarStore();
const { orderSelected } = storeToRefs(tabbarStore);
const router = Taro.useRouter();
const xlTimer = ref(null);
const state = reactive({
  tab1value: "0",
});
const topFlag = ref(false);
const loading = ref(false);
const isRefresher = ref(false);
const tabList = ref([
  {
    value: "",
    title: "全部订单",
  },
  {
    value: 1,
    title: "已支付",
  },
  // {
  //   value: 1,
  //   title: "已支付",
  // },
  {
    value: 3,
    title: "已出票",
  },
  {
    value: 4,
    title: "已完成",
  },
  // {
  //   value: -1,
  //   title: "超时订单",
  // },
  {
    value: -2,
    title: "已失败",
  },
]);
const orderList = ref([]);
// const type = ref(0);
const type = orderSelected;
const page = ref(1);
const pageSize = ref(5);
const total = ref(0);
const timer = ref(null);
const loadingFlag = ref(false);
const tipFlag = ref(false);
const last_page = ref(0);
const listContainerHeight = ref(null);
const scrollTop = ref(0);
const onScrollBottom = () => {
  // console.log("onReachBottom");
  loadingFlag.value = true;
  if (timer.value) {
    clearTimeout(timer.value);
  }
  timer.value = setTimeout(() => {
    if (page.value <= last_page.value) {
      page.value++;
      getList(type.value, page.value, pageSize.value, 1);
    } else {
      Taro.showToast({
        title: "没有更多数据了呢",
        icon: "none",
      });
    }
  }, 800);
};

const getList = async (type, page, pageSize, status) => {
  const res = await orderApi.OrderList({
    orderProgress: type,
    page,
    size: pageSize,
  });
  console.log(res);
  if (status) {
    orderList.value = [...orderList.value, ...res.list];
    total.value = res.pagination.total;
    last_page.value = Math.ceil(res.pagination.total / res.pagination.size);
    console.log(last_page.value, "----------");
    loadingFlag.value = false;
    loading.value = false;
    tipFlag.value = true;
  } else {
    orderList.value = [];
    orderList.value = res.list;
    total.value = res.pagination.total;
    last_page.value = Math.ceil(res.pagination.total / res.pagination.size);
    console.log(last_page.value, "----------");
    loadingFlag.value = false;

    loading.value = false;
    tipFlag.value = true;
    // setTimeout(() => {}, 3000);
    setTimeout(() => {
      topFlag.value = false;
    }, 1000);
  }
  Taro.hideLoading();
};
onMounted(() => {
  Taro.showLoading({
    title: "加载中",
    mask: true,
  });

  loading.value = true;
  getList(type.value, page.value, pageSize.value, 0);
});
// const ScrollToUpper = () => {
//   // console.log(123);
//   if (xlTimer.value) {
//     clearTimeout(xlTimer.value);
//   }
//   xlTimer.value = setTimeout(() => {
//     topFlag.value = true;
//     page.value = 1;
//     tipFlag.value = false;
//     loadingFlag.value = false;

//     getList(type.value, page.value, pageSize.value, 0);
//   }, 800);
// };
const onScroll = (e) => {
  // console.log(e, "ooooooooooooooo");
  scrollTop.value = e.scrollTop;
};
const onRefresh = () => {
  if (xlTimer.value) {
    clearTimeout(xlTimer.value);
  }
  xlTimer.value = setTimeout(() => {
    topFlag.value = true;
    page.value = 1;
    tipFlag.value = false;
    loadingFlag.value = false;

    getList(type.value, page.value, pageSize.value, 0);
    Taro.stopPullDownRefresh();
  }, 800);
};
usePullDownRefresh(() => {
  // isRefresher.value = true;
  onRefresh();
});
watch(orderSelected, (index) => {
  // console.log(index, "order");
  onTabChanged({ value: index });
});
const onTabChanged = (data) => {
  // console.log(data, "从子组件穿过老的");
  type.value = data.value;
  // console.log(type.value, "打印");
  page.value = 1;
  pageSize.value = 5;
  getList(type.value, page.value, pageSize.value, 0);
};
const handleClickitem = (item) => {
  console.log(item, "-");
  Taro.navigateTo({
    url: `/pages/zhifu-detail/index?orderId=${item.id}`,
  });
};

useDidShow(() => {
  setTimeout(() => {
    getListContainerHeight();
  }, 600);
});
const getListContainerHeight = () => {
  const query = Taro.createSelectorQuery()
    .select(".list-container")
    .boundingClientRect();
  query.selectViewport();
  query.exec(function (res) {
    if (res[0]) {
      listContainerHeight.value = res[0].height;
      console.log(res[0].height);
    }
  });
};
</script>

<style lang="scss">
.order-container {
  // padding-top: 3rem;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  .list-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    .Loading-dian {
      // background-color: pink;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      // position: relative;

      .loadingThree {
        // position: absolute;
        width: 150px;
        height: 15px;
        margin-bottom: 30px;
        span {
          display: inline-block;
          width: 15px;
          height: 100%;
          margin-right: 5px;
          border-radius: 50%;
          background: #858a99;
          -webkit-animation: load 1.04s ease infinite;
        }
      }
      .loadingThree span:nth-child(3) {
        margin-right: 0;
      }

      @-webkit-keyframes load {
        0% {
          opacity: 1;
        }
        100% {
          opacity: 0;
        }
      }
      .loadingThree span:nth-child(1) {
        -webkit-animation-delay: 0.13s;
      }
      .loadingThree span:nth-child(2) {
        -webkit-animation-delay: 0.26s;
      }
      .loadingThree span:nth-child(3) {
        -webkit-animation-delay: 0.39s;
      }
    }
  }
  .list-item-container {
    // padding: 0 10px 20px 10px;
    border-radius: 10px;
    padding: 0 25px;
  }
  .list-item-container:nth-child(n + 2) {
    margin-top: 25px;
  }

  .list-item-container:first-of-type {
    padding-top: 25px;
  }
  .list-item-container:last-of-type {
    padding-bottom: 300px;
  }

  .size {
    font-size: 32px;
  }
}
</style>
